<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复选框选中功能</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        #box {
            width: 130px;
            box-sizing: border-box;
            padding: 10px;
            margin: 10px auto;
            border: 1px solid black;
            border-radius: 10px;
            text-align: left;
        }

        input {
            margin-right: 5px;
        }
    </style>
</head>

<body>
    <div id="box">
        <p><input type="checkbox" name="" id="Yhj"> <span id="span">全选</span> <a href="###" id="a">反选</a></p>
        <div>
            <ul id="uu">
                <li><input type="checkbox" name="" id="">选项一</li>
                <li><input type="checkbox" name="" id="">选项二</li>
                <li><input type="checkbox" name="" id="">选项三</li>
                <li><input type="checkbox" name="" id="">选项四</li>
                <li><input type="checkbox" name="" id="">选项五</li>
                <li><input type="checkbox" name="" id="">选项六</li>
                <li><input type="checkbox" name="" id="">选项七</li>
                <li><input type="checkbox" name="" id="">选项八</li>
                <li><input type="checkbox" name="" id="">选项九</li>
                <li><input type="checkbox" name="" id="">选项十</li>
            </ul>
        </div>
    </div>

    <script>
        window.onload = function () {
            var yhj = document.getElementById('Yhj')
            var a = document.getElementById('a')
            var span = document.getElementById('span')
            var checks = document.getElementById('uu').getElementsByTagName('input')

            function x(){
                if (span.innerText == '全选') {
                    span.innerText = '全不选'  
                    // console.log(1);                  
                } else {
                    span.innerText = '全选'
                    // console.log(1);
                }
            }
            //全选、全不选
            yhj.onclick = function () {
                // console.log('选中了');
                console.log(span.innerText);
                if (span.innerText == '全选') {
                    span.innerText = '全不选'
                    for (let i = 0; i < checks.length; i++) {
                        checks[i].checked = true
                    }
                } else {
                    span.innerText = '全选'
                    for (let i = 0; i < checks.length; i++) {
                        checks[i].checked = false
                    }
                }
            }
        //反选
            a.onclick = function(){
                for (let i = 0; i < checks.length; i++) {
                        checks[i].checked = !checks[i].checked                        
                    }
                    var typ = true
                    for(let i =0; i<checks.length;i++){
                        if(checks[i].checked == false){
                            typ = false                           
                        }
                        yhj.checked = typ
                        if(typ == true){
                                span.innerText = '全不选'
                                console.log(typ);
                            }else{
                                span.innerText = '全选'
                                console.log(typ);
                            }
                    }
                    
            }



            for (let i = 0; i < checks.length; i++) {
                // console.log(checks[i]);
                checks[i].onclick = function () {
                    // console.log(checks);
                    var typ = true
                    for(let i =0; i<checks.length;i++){
                        if(checks[i].checked == false){
                            typ = false
                        }
                        yhj.checked = typ
                        if(typ == true){
                                span.innerText = '全不选'
                                console.log(typ);
                            }else{
                                span.innerText = '全选'
                                console.log(typ);
                            }
                    }
                                     
                }
            }
        }
    </script>

</body>

</html>